<!--引入公共的模板-->
{{extend './layout.html'}}
{{block 'content'}}
  <div class="container mt-5">
    <div class="row free">
    <!-- 精品课程 -->
    </div>
  </div>
  <!-- 分页 -->
  <nav class="container mt-5">
    <ul class="pagination justify-content-center">
      <li class="page-item">
        <a class="page-link" href="#" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      <% for(var i = 0; i < btnNum; i++){  %>
        <li class="page-item pageBut"><a class="page-link" href="javascript:;"><%= i+1 %></a></li>
      <% } %>
      <li class="page-item">
        <a class="page-link" href="#" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
  </nav>
 
  <script>

  var pageNum = 1;

  function getBoutique(num){
    $.ajax({
      url:"/api/limitBoutique",
      type:"POST",
      data:{ num },
      success:function(data){
        console.log(data);
        var str = "";
        data.boutique.forEach((element,index) => {
          str += `        
          <div class="col-3">
            <a href=${ "/detail?id="+element.article_id }>
              <div class="card">
                <img src= ${ element.thumb }  class="card-img-top" alt="${ index }" style="height:180px;">
                <div class="card-body">
                  <h5 class="card-title">${ element.title }</h5>
                  <p class="card-text" style="overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;">${ element.intro } </p>
                </div>
              </div>
            </a>
          </div>        
          `
        });
        $('.free').html(str);
      }
    })
  }

  // 初始化一次
  getBoutique(pageNum);

  // 分页点击事件
  $('.pageBut').click(function(){
    // console.log($(this).text());  
    // 1.获取页面的号码
    pageNum = Number($(this).text());
    // console.log(pageNum);
    // 2.调用ajax请求
    getBoutique(pageNum);
  })



  </script>

{{/block}}